<template>
    <div class="page-container">
        <el-tabs v-model="activeName"  class="demo-tabs">
            <el-tab-pane label="需求表" name="first"></el-tab-pane>
            <el-tab-pane label="需求询问题" name="second"></el-tab-pane>
        </el-tabs>
        
    <paper-list-detail v-if="activeName == 'first'" :activeName="activeName"></paper-list-detail>
    <question-list-detail v-if="activeName == 'second'" :activeName="activeName"></question-list-detail>
    </div>
</template>
  
<script>
import { reactive, toRefs, onMounted } from 'vue'
import PaperListDetail from './components/PaperListDetail.vue'
import QuestionListDetail from './components/QuestionListDetail.vue'
export default {
    name: 'Paper',
    components: {
        PaperListDetail,
        QuestionListDetail
    },
    setup() {
        const state = reactive({
            activeName: 'first'
        })
        return {
            ...toRefs(state)
        }
    }
}
</script>
  
<style lang="scss" scoped>
.page-container {
    .table-list {
        background: var(--next-color-white);
        margin-top: 10px;

        :deep(.el-table__header-wrapper .el-table__cell) {
            background: var(--el-color-primary-light-9);
            color: var(--next-bg-menuBar-light-1);
        }
    }
}
</style>